<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="crud.cancelCU"
    :visible="crud.status.cu > 0"
    :title="crud.status.title"
    width="500px"
  >
    <el-form ref="form" :model="form" size="small" label-width="80px">

      <el-form-item
        label="名称"
        prop="name"
      >
        <el-input v-model="form.name" style="width: 370px;"/>
      </el-form-item>

      <el-form-item
        label="班主任"
        prop="coordinator"
      >
        <el-input v-model="form.coordinator" style="width: 370px;"/>
      </el-form-item>

      <el-form-item
        label="邮箱"
        prop="email"
      >
        <el-input v-model="form.email" style="width: 370px;"/>
      </el-form-item>

      <el-form-item
        label="简介"
        prop="description"
      >
        <el-input v-model="form.description" style="width: 370px;"/>
      </el-form-item>

      <el-form-item
        label="手机号"
        prop="phoneNum"
      >
        <el-input v-model="form.phoneNum" style="width: 370px;"/>
      </el-form-item>

      <el-form-item label="年级" prop="gradeId">
        <el-select v-model="form.gradeId" style="width: 178px" placeholder="请先选择年级">
          <el-option
            v-for="(item, index) in gradeList"
            :key="item.name + index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="班级人数"
        prop="number"
      >
        <el-input v-model="form.number" style="width: 370px;"/>
      </el-form-item>

    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="text"
        @click="crud.cancelCU"
      >
        取消
      </el-button>
      <el-button
        :loading="crud.cu === 2"
        type="primary"
        @click="crud.submitCU"
      >
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import CRUD, { form } from '@crud/crud'
  import {getGradeList} from '../../../api/ceamGrade'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  const defaultForm = {
    nickname: null,
    username: null,
    education: null,
    college: null,
    sex: null,
    employTime: null,
    phoneNum: null
  }

  export default {
    mixins: [form(defaultForm)],
    props: {

    },
    data() {
      return {
        gradeList: []
      }
    },
    methods: {
      [CRUD.HOOK.beforeToCU]() {
        getGradeList({page: 0, size: 100}).then(res => {
          this.gradeList = res.records;
        })
      },
      // 提交前的验证
      [CRUD.HOOK.afterValidateCU]() {

        return true
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
